<template>
  <!-- <view class="baseBottomHeaderPadding"> -->
  <view class="">
    <!-- 搜索 -->
    <view class="BaseSearch">
      <Basetopselect
        @selectitem="selectitem"
        :showlast="boolzhi"
        :arr="itemarr"
        @pricebtn="pricebtn"
        :zhi="type"
        @sousuo="sousuo"
      >
      </Basetopselect>
    </view>

    <view class="dropdownBox">
      <van-dropdown-menu :z-index="999">
        <!-- 价格 -->
        <van-dropdown-item id="item" title="价格">
          <SelectItems
            :items="rentprice"
            :actived="rentpriceIndex"
            @selectItem="
              selectItem($event, 'rentprice', 'rentpriceIndex', false, true)
            "
            v-if="type == '二手房'"
          >
          </SelectItems>
          <SelectItems
            :items="ershouprice"
            :actived="rentpriceIndex"
            @selectItem="
              selectItem($event, 'ershouprice', 'rentpriceIndex', false, true)
            "
            v-if="type == '租房'"
          >
          </SelectItems>
          <DropdownTwoBtn
            left="不限条件"
            right="确定"
            @clickReset="pricereset"
            @clickRight="priceright"
          >
          </DropdownTwoBtn>
        </van-dropdown-item>
        <!-- 户型 -->
        <van-dropdown-item id="items" title="房型">
          <SelectItems
            :items="huxing"
            :actived="huxingIndex"
            @selectItem="
              selectItem($event, 'huxing', 'huxingIndex', false, true)
            "
          ></SelectItems>
          <DropdownTwoBtn
            left="不限条件"
            right="确定"
            @clickReset="huxingreset"
            @clickRight="huxingright"
          >
          </DropdownTwoBtn>
        </van-dropdown-item>
        <!-- 筛选 -->
        <van-dropdown-item id="itema" title="筛选">
          <!-- 面积 -->
          <SelectItems
            :items="mianji"
            :actived="mianjiIndex"
            @selectItem="
              selectItem($event, 'mianji', 'mianjiIndex', false, true)
            "
            title="面积（㎡)"
            v-if="type == '二手房'"
          >
          </SelectItems>

          <SelectItems
            :items="renttype"
            :actived="renttypeIndex"
            @selectItem="
              selectItem($event, 'renttype', 'renttypeIndex', false, true)
            "
            title="出租方式"
            v-if="type == '租房'"
          >
          </SelectItems>
          <SelectItems
            :items="leixing"
            :actived="leixingIndex"
            @selectItem="
              selectItem($event, 'leixing', 'leixingIndex', false, false)
            "
            title="房源特色"
            v-if="type == '二手房'"
          >
          </SelectItems>
          <SelectItems
            :items="housebright"
            :actived="housebrightIndex"
            @selectItem="
              selectItem(
                $event,
                'housebright',
                'housebrightIndex',
                false,
                false
              )
            "
            title="房源亮点"
            v-if="type == '租房'"
          >
          </SelectItems>
          <SelectItems
            :items="elevators"
            :actived="elevatorsIndex"
            @selectItem="
              selectItem($event, 'elevators', 'elevatorsIndex', false, false)
            "
            title="电梯"
            v-if="type == '租房'"
          >
          </SelectItems>
          <SelectItems
            :items="chaoxiang"
            :actived="chaoxiangIndex"
            @selectItem="
              selectItem($event, 'chaoxiang', 'chaoxiangIndex', false, true)
            "
            title="朝向"
          >
          </SelectItems>
          <SelectItems
            :items="louceng"
            :actived="loucengIndex"
            @selectItem="
              selectItem($event, 'louceng', 'loucengIndex', false, true)
            "
            title="楼层"
          >
          </SelectItems>
          <DropdownTwoBtn
            left="不限条件"
            right="确定"
            @clickReset="shaixuanreset"
            @clickRight="shaixuanright"
          >
          </DropdownTwoBtn>
        </van-dropdown-item>
        <van-dropdown-item
          :value="value1"
          :options="options2"
          @change="change5"
          title="排序"
          v-if="type == '二手房'"
        />
        <van-dropdown-item
          :value="value2"
          :options="options1"
          @change="change6"
          title="排序"
          v-if="type == '租房'"
        />
      </van-dropdown-menu>
    </view>

    <scroll-view
      scroll-y="true"
      class="myscroll"
      @scrolltolower="scrolltolower"
    >
      <view
        class="content"
        v-for="(item, index) in arr"
        :key="index"
        @click="housingresource(item)"
      >
        <image :src="item.image" mode="" class="tu"></image>
        <view class="brief">
          <view class="title">
            {{ item.name }}
          </view>
          <view class="area">
            <text>{{ item.room }}室{{ item.hall }}厅</text>
            <text>{{ item.building_area || item.house_area }}㎡</text>
            <text>{{ item.orientation }}</text>
            <text>{{ item.community_name }}</text>
          </view>

          <view class="">
            <view class="lablebox">
              <ColorfulLabel :labelArr="item.label"></ColorfulLabel>
            </view>
            <view class="pricebox">
              <view class="total" v-if="item.type == 1">
                <text>{{ item.price }}</text
                >万
              </view>
              <view class="price" v-if="item.type == 1">
                {{ item.unit_price }}元/㎡
              </view>
              <view class="price" v-if="item.type != 1">
                <text>{{ item.price }}</text
                >元/月
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- <BaseBottom :selectPath="'/pages/loan/index'"></BaseBottom> -->
  </view>
</template>

<script>
import Basetopselect from "../../components/Basetopselect/index.vue";
import BaseHouseList from "../../components/BaseHouseList/index.vue";
import YellowTags from "../../components/YellowTags/index.vue";
import DropdownTwoBtn from "../../components/DropdownTwoBtn/index.vue";
import SelectItems from "../../components/SelectItems/index.vue";
import msgStorage from "../../pagesA/components/chat/msgstorage";
// import BaseBottom from "../../components/BaseBottom/index.vue";
import { gethouselist, getselect } from "../../api/api/index.js";
import ColorfulLabel from "../../components/ColorfulLabel/index.vue";
var WebIM = require('../../pagesA/utils/WebIM')["default"];
export default {
  components: {
    Basetopselect,
    BaseHouseList,
    YellowTags,
    DropdownTwoBtn,
    SelectItems,
    // BaseBottom,
    ColorfulLabel,
  },
  data() {
    return {
      im_name: "",
      name: "",
      header_img: "",
      // 出租房和二手房的价格显示
      priceshow: true,
      type: "二手房",
      // 下拉框
      itemarr: [
        {
          text: "二手房",
        },
        {
          text: "租房",
        },
      ],
      boolzhi: false,

      activeKey: 0,
      mainActiveIndex: 0,
      activeId: [],
      max: 10,
      house_type: [],
      renttype: [],
      renttypeIndex: [],
      // 价格数据
      ershouprice: [],
      rentprice: [],
      rentpriceIndex: [],
      //户型的数据
      huxing: [],
      huxingIndex: [],
      mianji: [],
      mianjiIndex: [],
      leixing: [],
      leixingIndex: [],
      chaoxiang: [],
      chaoxiangIndex: [],
      louceng: [],
      loucengIndex: [],
      // 房源亮点
      housebright: [],
      housebrightIndex: [],
      elevators: [],
      elevatorsIndex: [],
      // 加载
      page: 1,
      value1: "价格正序",
      value2: "sort desc",
      options2: [
        {
          text: "价格正序",
          value: "价格正序",
        },
        {
          text: "价格倒序",
          value: "价格倒序",
        },
      ],
      options1: [
        {
          text: "综合排序",
          value: "sort desc",
        },
        {
          text: "最新发布",
          value: "create_time desc",
        },
        {
          text: "价格升序",
          value: "price asc",
        },
        {
          text: "价格倒序",
          value: "price desc",
        },
        {
          text: "面积升序",
          value: "building_area asc",
        },
        {
          text: "面积倒序",
          value: "building_area desc",
        },
      ],

      // 房源
      arr: [],
    };
  },
  methods: {
    change5(e) {
      this.value1 = e.detail;
      this.arr = [];
      this.page = 1;
      this.public();
    },
    change6(e) {
      this.value2 = e.detail;
      this.arr = [];
      this.page = 1;
      this.public();
    },

    // clickHouse() {
    // 	this.jumpLink({
    // 		link: "/pages/newHouseDetail/index"
    // 	});
    // },
    // 重置
    pricereset() {
      this.rentpriceIndex = [];
    },
    huxingreset() {
      this.huxingIndex = [];
    },
    shaixuanreset() {
      this.mianjiIndex = [];
      this.leixingIndex = [];
      this.chaoxiangIndex = [];
      this.loucengIndex = [];
      this.renttypeIndex = [];
      this.housebrightIndex = [];
      this.elevatorsIndex = [];
    },
    // 确定选择
    priceright() {
      this.arr = [];
      this.page = 1;
      this.public();
      this.selectComponent("#item").toggle();
    },
    huxingright(v) {
      this.arr = [];
      this.page = 1;
      this.public();
      this.selectComponent("#items").toggle();
    },
    shaixuanright(v) {
      this.arr = [];
      this.page = 1;
      this.public();
      this.selectComponent("#itema").toggle();
    },
    //查找一个数组中某个数据的某个字段
    takeSomeData(arr, id, name) {
      let value = "";
      arr.forEach((v) => {
        if (v.id == id) {
          value = v[name];
        }
      });
      return value;
    },

    // 头部地区选择和搜索
    selectitem(item) {
      this.type = item;
      this.boolzhi = true;
    },
    pricebtn(e) {
      this.boolzhi = false;
      this.type = e;
      this.rentpriceIndex = [];
      this.public();
      if (e == "租房") {
        this.priceshow = false;
        this.page = 1;
      } else {
        this.page = 1;
        this.priceshow = true;
      }
    },
    sousuo() {
      console.log(this.type);
    },

    // 触底加载
    scrolltolower() {
      this.page = this.page + 1;
      let data = {};
      uni.showLoading({
        mask: true,
        title: "加载中",
      });
      let min_price = "";
      let max_price = "";
      let sort = "";
      let house_features = "";
      // let data = {
      // 	page: this.page,
      // 	limit: 30,
      // 	type: this.type,
      // 	house_type: this.house_type
      // }
      if (this.type == "二手房") {
        data = {
          page: this.page,
          limit: 30,
          type: this.type,
          house_type: this.takeSomeData(
            this.huxing,
            this.huxingIndex.join(),
            "name"
          ),
          min_price: this.takeSomeData(
            this.rentprice,
            this.rentpriceIndex.join(),
            "min"
          ),
          max_price: this.takeSomeData(
            this.rentprice,
            this.rentpriceIndex.join(),
            "max"
          ),
          min_area: this.takeSomeData(
            this.mianji,
            this.mianjiIndex.join(),
            "min"
          ),
          max_area: this.takeSomeData(
            this.mianji,
            this.mianjiIndex.join(),
            "max"
          ),
          orientation: this.takeSomeData(
            this.chaoxiang,
            this.chaoxiangIndex.join(),
            "name"
          ),
          the_floor: this.takeSomeData(
            this.louceng,
            this.loucengIndex.join(),
            "name"
          ),
          house_features: this.leixingIndex.join("|"),
          sort: this.value1,
          rent_type: this.takeSomeData(
            this.renttype,
            this.renttypeIndex.join(),
            "name"
          ),
          // elevator:this.takeSomeData(this.elevators, this.elevatorsIndex.join(), 'name')
        };
      } else {
        data = {
          page: this.page,
          limit: 30,
          type: this.type,
          house_type: this.takeSomeData(
            this.huxing,
            this.huxingIndex.join(),
            "name"
          ),
          min_price: this.takeSomeData(
            this.ershouprice,
            this.rentpriceIndex.join(),
            "min"
          ),
          max_price: this.takeSomeData(
            this.ershouprice,
            this.rentpriceIndex.join(),
            "max"
          ),
          // min_area: this.takeSomeData(this.mianji, this.mianjiIndex.join(), 'min'),
          // max_area: this.takeSomeData(this.mianji, this.mianjiIndex.join(), 'max'),
          orientation: this.takeSomeData(
            this.chaoxiang,
            this.chaoxiangIndex.join(),
            "name"
          ),
          the_floor: this.takeSomeData(
            this.louceng,
            this.loucengIndex.join(),
            "name"
          ),
          house_features: this.housebrightIndex.join("|"),
          sort: this.value2,
          rent_type: this.takeSomeData(
            this.renttype,
            this.renttypeIndex.join(),
            "name"
          ),
          elevator: this.takeSomeData(
            this.elevators,
            this.elevatorsIndex.join(),
            "name"
          ),
        };
      }

      gethouselist(data).then((res) => {
        uni.hideLoading();
        this.arr = this.arr.concat(res.data);
      });
    },

    public() {
      uni.showLoading({
        mask: true,
        title: "加载中",
      });
      let min_price = "";
      let max_price = "";
      let sort = "";
      let house_features = "";
      let data = {};
      this.page = 1;
      if (this.type == "二手房") {
        data = {
          page: this.page,
          limit: 30,
          type: this.type,
          house_type: this.takeSomeData(
            this.huxing,
            this.huxingIndex.join(),
            "name"
          ),
          min_price: this.takeSomeData(
            this.rentprice,
            this.rentpriceIndex.join(),
            "min"
          ),
          max_price: this.takeSomeData(
            this.rentprice,
            this.rentpriceIndex.join(),
            "max"
          ),
          min_area: this.takeSomeData(
            this.mianji,
            this.mianjiIndex.join(),
            "min"
          ),
          max_area: this.takeSomeData(
            this.mianji,
            this.mianjiIndex.join(),
            "max"
          ),
          orientation: this.takeSomeData(
            this.chaoxiang,
            this.chaoxiangIndex.join(),
            "name"
          ),
          the_floor: this.takeSomeData(
            this.louceng,
            this.loucengIndex.join(),
            "name"
          ),
          house_features: this.leixingIndex.join("|"),
          sort: this.value1,
          rent_type: this.takeSomeData(
            this.renttype,
            this.renttypeIndex.join(),
            "name"
          ),
          // elevator:this.takeSomeData(this.elevators, this.elevatorsIndex.join(), 'name')
        };
      } else {
        data = {
          page: this.page,
          limit: 30,
          type: this.type,
          house_type: this.takeSomeData(
            this.huxing,
            this.huxingIndex.join(),
            "name"
          ),
          min_price: this.takeSomeData(
            this.ershouprice,
            this.rentpriceIndex.join(),
            "min"
          ),
          max_price: this.takeSomeData(
            this.ershouprice,
            this.rentpriceIndex.join(),
            "max"
          ),
          // min_area: this.takeSomeData(this.mianji, this.mianjiIndex.join(), 'min'),
          // max_area: this.takeSomeData(this.mianji, this.mianjiIndex.join(), 'max'),
          orientation: this.takeSomeData(
            this.chaoxiang,
            this.chaoxiangIndex.join(),
            "name"
          ),
          the_floor: this.takeSomeData(
            this.louceng,
            this.loucengIndex.join(),
            "name"
          ),
          house_features: this.housebrightIndex.join("|"),
          sort: this.value2,
          rent_type: this.takeSomeData(
            this.renttype,
            this.renttypeIndex.join(),
            "name"
          ),
          elevator: this.takeSomeData(
            this.elevators,
            this.elevatorsIndex.join(),
            "name"
          ),
        };
      }
      gethouselist(data).then((res) => {
        uni.hideLoading();
        this.arr = res.data;
        // this.arr = this.arr.concat(res.data)
        // if (res.data.length < this.limit) {
        // 	this.isOk = true
        // }
      });
    },

    // 房源页面跳转
    housingresource(v) {
      let type = v.type;
      let sharehouse = { id: v.id, type: type, image: v.image };
      // this.$store.dispatch('SETBEFORHOUSE', sharehouse)
      uni.hideLoading();
      var my = uni.getStorageSync("myUsername");
      var nameList = {
        myName: my,
        name: this.name,
        your: this.im_name, //im_name
        header_img: this.header_img,
        ...sharehouse,
        housename: v.name,
      };
      //   return console.log(nameList);

      this.sendPrivateText(nameList);
      // this.$store.dispatch("sendJJRhouse", nameList.my, nameList.your);
    },

    // 单聊发送文本消息 17393116916
    sendPrivateText(nameList) {
      let id = WebIM.conn.getUniqueId(); // 生成本地消息id
      let msg = new WebIM.message("txt", id); // 创建文本消息
      msg.set({
        msg: "[房源消息]", // 消息内容
        from: nameList.myName,
        to: nameList.your, // 接收消息对象（用户id）
        chatType: "singleChat", // 设置为单聊
        ext: {
          name: nameList.housename,
          image: nameList.image,
          id: nameList.id,
          type: nameList.type,
        }, //扩展消息
        success: function (id, serverMsgId) {
          console.log("send private text Success 成功了");
          uni.navigateTo({
            url:
              "/pagesA/pages/messageRoom/messageRoom?username=" +
              JSON.stringify(nameList),
          });
        },
        fail: function (e) {
          debugger;
          // 失败原因:
          // e.type === '603' 被禁言
          // e.type === '605' 群组不存在
          // e.type === '602' 不在群组或聊天室中
          // e.type === '504' 撤回消息时超出撤回时间
          // e.type === '505' 未开通消息撤回
          // e.type === '506' 没有在群组或聊天室白名单
          // e.type === '503' 未知错误

          console.log("Send private text error", e);
        },
      });
      let obj = {
        msg: msg,
        type: "txt",
      };
      // chatType: "singleChat"
      // ext: {}
      // fail: ƒ fail(id, serverMsgId)
      // from: "可爱又迷人的反派角色"
      // id: 362490925937
      // msg: "l"
      // roomType: false
      // success: ƒ success(id, serverMsgId)
      // to: "17393116916_3"
      // type: "txt"
      // __proto__: Object
      // id: 362490925937
      // type: "txt"
      // value: "l"

      this.saveSendMsg(obj);
      WebIM.conn.send(msg.body);
    },
    saveSendMsg(evt) {
      msgStorage.saveMsg(evt.msg, evt.type);
    },
  },
  onLoad(options) {
    console.log(WebIM);
    debugger;
    this.im_name = options.im_name;
    this.name = options.name;
    this.header_img = options.header_img;
    getselect({
      type: "price,house_type,building_area,house_features,orientation,the_floor,rent_price,rent_term,rent_type,house_bright,elevator",
    }).then((res) => {
      this.rentprice = res.data.price.child.map((v) => {
        v.text = v.name;
        return v;
      });
      this.huxing = res.data.house_type.child.map((v) => {
        v.text = v.name;
        return v;
      });
      this.mianji = res.data.building_area.child.map((v) => {
        v.text = v.name;
        return v;
      });
      this.leixing = res.data.house_features.child.map((v) => {
        v.text = v.name;
        v.id = v.name;
        return v;
      });
      this.chaoxiang = res.data.orientation.child.map((v) => {
        v.text = v.name;
        return v;
      });
      this.louceng = res.data.the_floor.child.map((v) => {
        v.text = v.name;
        return v;
      });
      this.ershouprice = res.data.rent_price.child.map((v) => {
        v.text = v.name;
        return v;
      });
      this.renttype = res.data.rent_type.child.map((v) => {
        v.text = v.name;
        return v;
      });
      this.housebright = res.data.house_bright.child.map((v) => {
        v.text = v.name;
        v.id = v.name;
        return v;
      });
      this.elevators = res.data.elevator.child.map((v) => {
        v.text = v.name;
        return v;
      });
    });
  },
  onShow() {
    this.public();
    uni.hideHomeButton();
  },
};
</script>

<style scoped lang="scss">
.BaseSearch {
  padding: 30rpx 17rpx;
  box-sizing: border-box;
  background: #fff;
}

.threeIcon {
  image {
    width: 98rpx;
    height: 98rpx;
  }
}

.dropdownBox {
  background: #fff;

  .quyu {
    display: flex;

    .quyuRight {
      width: 100%;
    }
  }
}

.slot-content {
  background: #fff;
}

.BaseHouseList {
  padding: 30rpx 0;
  box-sizing: border-box;
  background: #fff;
}

.someTag {
  background: #fff;
  padding: 10rpx 15rpx;
  box-sizing: border-box;

  .u-tag {
    margin-right: 20rpx !important;
  }
}

/* 房源 */
.content {
  display: flex;
  // margin-left: 20rpx;
  margin-bottom: 20rpx;
}

.tu {
  width: 208rpx;
  height: 169rpx;
  border-radius: 10rpx;
}

.content > .brief {
  margin-left: 35rpx;
  width: 400rpx;
}

.brief > .title {
  font-size: 28rpx;
  color: #282828;
  font-family: MicrosoftYaHei-Bold;
  font-weight: 700;
  font-stretch: normal;
  width: 300rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brief > .area {
  font-size: 22rpx;
  color: #878787;
  font-family: MicrosoftYaHei-Bold;
  margin-top: 10rpx;
}

.brief > .area > text {
  margin-right: 10rpx;
}

.lablebox {
  display: flex;
}

.labeone {
  width: 71rpx;
  height: 31rpx;
  text-align: center;
  line-height: 31rpx;
  border-radius: 16rpx;
  background-color: #ffdddc;
  font-size: 18rpx;
  display: inline-block;
  color: rgb(210, 73, 89);
}

.labletwo {
  display: inline-block;
  width: 102rpx;
  height: 31rpx;
  text-align: center;
  line-height: 31rpx;
  border-radius: 16rpx;
  background-color: #ffefdc;
  font-size: 18rpx;
  color: #d88e35;
  margin-left: 7rpx;
}

.lablethree {
  display: inline-block;
  width: 102rpx;
  height: 31rpx;
  text-align: center;
  line-height: 31rpx;
  background-color: #dcf8ff;
  border-radius: 16rpx;
  font-size: 18rpx;
  color: #33b1d0;
  margin-left: 7rpx;
}

.pricebox {
  display: flex;
  margin-top: 10rpx;
}

.total {
  color: #e13c35;
  font-size: 18rpx;
  font-family: MicrosoftYaHei;
  margin-right: 34rpx;
}

.total > text {
  font-size: 30rpx;
  font-weight: 700;
  font-family: PingFang-SC-Heavy;
  margin-right: 10rpx;
}

.price {
  font-size: 20rpx;
  font-family: MicrosoftYaHei;
  color: #666666;
  margin-top: 12rpx;
}

/* 完善信息 */
.complete {
  width: 180rpx;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  border-radius: 30rpx;
  background-color: #f75653;
  font-size: 26rpx;
  color: #ffffff;
  margin-top: 32rpx;
}

.myscroll {
  height: calc(100vh - 239rpx);
  box-sizing: border-box;
  padding: 20rpx;
}
</style>
